<script >
import {ref} from "vue";
import axios from "axios";

import {Search} from "@element-plus/icons-vue/global";
import {ElMessage} from "element-plus";

export default {
  computed: {
    Search() {
      return Search
    }
  },
  setup(){

const formdata=ref("");
let Build=()=>{
  if (formdata.value==""){
    return ElMessage({
      type:'error',
      message:"亲！内容为空！请您输入您要生成的ppt模板内容"
    })
  }
 load.value=true;
 ElMessage({
    type:'success',
    message:"正在为您生成请不要离开 耐心等待~~~"
  })
  axios.get("/ppt/build",{
    params:{
      query:formdata.value
    }
  }).then(result=>{
   pptresult.value.pptload=result.data.data.data.process
    pptresult.value.ppturl=result.data.data.data.pptUrl
    table.value=true;
  }).catch(error=>{
    console.log(error)
  }).finally(()=>{
    load.value=false
  })
}
const  openppt=()=>{
  table.value=true;
    }
const table=ref(false)
const  load=ref(false)

    const pptresult=ref({
      ppturl:'',
      pptload:''
    })
    return{
  Build,
formdata,
      load,table,pptresult,openppt
    }
  }

}
</script>

<template>
<div style="height: 600px;margin-top: 1.5% ;background: #F1FAEE" v-loading="load">
  <div style="text-align: center;margin-top: 20%">
    <el-text type="primary" style="font-size:30px;font-family: '华文琥珀';text-align: center;">
      Xfee小助手为您提供一键生成<el-text type="danger" style="font-size:30px;font-family: '阿里妈妈数黑体 Bold';">PPT</el-text>的强大功能
    </el-text>
    <br>
  <el-button type="success" @click="openppt" size="default">查看您生成的ppt</el-button>
    </div>
<div class="container">
  <el-input type="textarea" maxlength="100" show-word-limit="true" rows="3" size="large" placeholder="请输入您希望生成的ppt内容以及用途等等 例如我想生成一份绿色系的求职简历ppt 要求五页" v-model="formdata"></el-input>

  <el-button type="primary" size="default" style="width: 100%;" :disabled="load" @click="Build">生成</el-button>


</div>


</div>
  <el-drawer style="" v-model="table" title="Xfee小助手PPt生成" direction="rtl" size="50%">
   <div style="margin-top: 25%" >
     <el-card v-model="pptresult" style="text-align: center">
       <el-text type="primary" style="font-size:30px;font-family: '华文琥珀';text-align: center;">
         Xfee小助手为您提供一键生成<el-text type="danger" style="font-size:30px;font-family: '阿里妈妈数黑体 Bold';">PPT</el-text>的强大功能
       </el-text>
       <br>
       <el-text type="warning" size="large " v-if="pptresult.pptload==100">您的ppt生成进度{{pptresult.pptload}}%</el-text>
       <br>
       <el-text type="danger" size="large" style="margin-top: 5%" v-if="pptresult.pptload==''&&pptresult.pptload<100">
        您还没生成ppt呢
       </el-text>
       <span  v-if="pptresult.ppturl!=''" style="margin-top: 4%"><a :href="pptresult.ppturl"><el-button type="primary" style="width:100% ">下载您的ppt</el-button></a></span>
     </el-card>

   </div>

  </el-drawer>
</template>

<style scoped>


</style>